<template>
	<view class="page-cont">
		<navbar title="告警"></navbar>
		<scroll-view class="main-cont" :style="{height: pageHeight}" scroll-y refresher-enabled
			:refresher-triggered="isRefresh" @refresherrefresh="handlePullDownRefresh"
			@scrolltolower="handleReachBottom">
			<!-- 项目切换 -->
			<view class="project-select" @click="handleOpen">
				<view class="project-name">{{projectName}}</view>
				<image class="project-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
			</view>
			<!-- tab栏 -->
			<tab :tabActive="tabActive" :tabs="tabs" :badges="badges" @tabChange="handleTabChange"></tab>
			<!-- 列表 -->
			<view class="project-list" v-if="warnList&&warnList.length">
				<view class="project-list-item" v-for="(item, index) in warnList" :key="index"
					@click="handleDetail(item)">
					<view class="project-list-item-top">
						<view class="project-list-item-info">
							<view :class="['project-list-item-type', 'level' + item.level]">{{warnLevel[item.level]}}
							</view>
							<view :class="['project-list-item-title', 'level' + item.level]">{{item.title}}</view>
						</view>
						<image class="project-list-item-arrow" src="/static/right_arrow.png" v-if="tabActive==0">
						</image>
					</view>
					<view class="project-list-item-bottom">
						<view class="project-list-item-left">
							<view>开始时间：</view>
							<view class="project-list-item-time">{{item.starttime}}</view>
						</view>
						<view class="project-list-item-left" v-if="item.endtime">
							<view>结束时间：</view>
							<view class="project-list-item-time">{{item.endtime}}</view>
						</view>
						<view class="project-list-item-right">
							<view>持续时间：</view>
							<view class="project-list-item-time">{{item.diff}}</view>
						</view>
					</view>
					<view class="project-list-item-btn" v-if="tabActive == 0">
						<view class="project-list-item-confirm">确认</view>
					</view>
				</view>
			</view>
			<!-- 空白数据 -->
			<view class="empty-text" v-else>
				暂无相关数据
			</view>
		</scroll-view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in projectList" :key="index"
					@click="handleProjectChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, getCurrentInstance, watch } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { getWarnList } from "@/api/warn.js";
	import { useNavbar, useDict } from "@/utils/hooks.js";
	import useHomeStore from '@/store/home';
	const homeStore = useHomeStore();
	const { pageHeight } = useNavbar();
	const { warnLevel } = useDict();
	const { proxy } = getCurrentInstance();
	const { projectId, projectName, projectList } = storeToRefs(homeStore);
	// const tabs = ref(["正在告警", "历史告警"]);
	const tabs = ref(["正在告警", "历史告警", "告警设置"]);
	const tabList = ref(["1", "0", "2"])
	const badges = ref([]);
	const tabActive = ref(0);
	const popup = ref()
	const isOpen = ref(false)
	const isRefresh = ref(false)
	const warnList = ref([])
	const page = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})

	onShow(() => {

	});

	onLoad(() => {
		getList();
	});

	// 获取列表数据
	function getList() {
		let params = {
			pageNum: page.pageNum,
			pageSize: page.pageSize,
			keyword: "",
			mids: projectId.value,
		};
		if (tabActive.value != 2) {
			params["status"] = tabList.value[tabActive.value];
		}
		getWarnList(params).then(res => {
			isRefresh.value = false;
			let pageData = res.pageData || {};
			page.total = pageData.total || 0;
			pageData.list.forEach(item => {
				if (item.endtime) {
					let second = proxy.dayjs(item.endtime).diff(item.starttime);
					item.diff = convertSeconds(Number(second));
				} else {
					//未结束 持续到当前
					let second = proxy.dayjs().diff(item.starttime);
					item.diff = convertSeconds(Number(second));
				}
			})
			if (page.pageNum == 1) {
				warnList.value = pageData.list || [];
			} else {
				warnList.value = warnList.value.concat(pageData.list || []);
			}
		});
	}

	// 下拉刷新
	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		page.pageNum = 1;
		getList();
	}

	// 上拉加载更多
	const handleReachBottom = () => {
		if (page.pageNum * page.pageSize < page.total) {
			page.pageNum++;
			getList();
		}
	}

	// 下拉选择项目
	function handleOpen() {
		isOpen.value = true;
		popup.value.open();
	}
	// 项目切换
	function handleProjectChange(item) {
		isOpen.value = false;
		popup.value.close();
		homeStore.setProjectId(item.id);
		homeStore.setProjectName(item.name);
		page.pageNum = 1;
		getList();
	}
	// tab切换
	function handleTabChange(e) {
		tabActive.value = e;
		page.pageNum = 1;
		getList();
	}
	// 详情
	function handleDetail(e) {
		if (tabActive.value == 0) {
			homeStore.setWarnId(e.id);
			uni.navigateTo({
				url: '/pages/warn/detail'
			});
		}
	}

	// 时间戳转换
	function convertSeconds(seconds : number) {
		seconds = seconds / 1000;
		const days = Math.floor(seconds / (24 * 3600));
		const hours = Math.floor((seconds % (24 * 3600)) / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		const secs = Math.floor(seconds % 60);
		let str = "";
		if (days) {
			str += `${days}天`;
		}
		if (hours) {
			str += `${hours}小时`;
		}
		if (minutes) {
			str += `${minutes}分`;
		}
		str += `${secs}秒`;
		return str;
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			overflow: hidden;
			overflow-y: auto;
		}

		.project-select {
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.project-name {
				color: #666;
				font-size: 28rpx;
			}

			.project-arrow {
				padding-left: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.project-list {
			padding: 20rpx;

			.project-list-item {
				margin-top: 10px;
				padding: 10px;
				border-radius: 5px;
				background-color: #fff;

				&:first-child {
					margin-top: 0;
				}
			}

			.project-list-item-top {
				display: flex;
				justify-content: space-between;
			}

			.project-list-item-info {
				padding-right: 29px;
				display: flex;
				align-items: center;
				border-radius: 2px;
				background-color: #EFEEFC;
			}

			.project-list-item-type {
				width: 50px;
				min-width: 50px;
				height: 18px;
				line-height: 18px;
				color: #fff;
				font-size: 11px;
				text-align: center;
				border-radius: 2px;
				background-color: #8B7BFF;

				&.level0 {
					background-color: #E65157;
				}

				&.level1 {
					background-color: #FF7900;
				}

				&.level2 {
					background-color: #8B7BFF;
				}
			}

			.project-list-item-title {
				padding: 0 10px;
				width: calc(100% - 50px);
				color: #8B7BFF;
				font-size: 24rpx;
				font-weight: 600;

				&.level2 {
					color: #8B7BFF;
				}

				&.level1 {
					color: #FF7900;
				}

				&.level0 {
					color: #E65157;
				}

			}

			.project-list-item-arrow {
				width: 15px;
				height: 15px;
			}

			.project-list-item-bottom {
				padding-top: 9px;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				align-items: left;
			}

			.project-list-item-left,
			.project-list-item-right {
				display: flex;
				align-items: center;
				color: #999;
				margin-top: 5rpx;
				font-size: 12px;
			}

			.project-list-item-time {
				color: #666;
				font-weight: 600;
			}

			.project-list-item-btn {
				padding-top: 9px;
				display: flex;
				justify-content: flex-end;
			}

			.project-list-item-confirm {
				width: 66px;
				height: 25px;
				line-height: 25px;
				color: #2C5AEE;
				font-size: 11px;
				text-align: center;
				background-color: #E6EDFF;
			}
		}

		.empty-text {
			width: 100vw;
			text-align: center;
			position: absolute;
			top: 40%;
			color: #666;
			font-size: 28rpx;
		}
	}

	.popup-cont {
		background: #fff;
		max-height: 80vh;

		.popup-title,
		.popup-header {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.popup-header {
			font-size: 16px;
			font-weight: 600;
		}
	}
</style>